import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

/* Handling Events */
/* 事件处理 */

// 命名采用驼峰式, 而非纯小写, 使用JSX时传入一个函数而非字符串
// 不能通过返回false阻止默认行为, 必须显式使用preventDefault(e.prevenDefault())
// 不需要使用addEventListener添加监听器, 而是在该元素初始渲染时添加监听器

class Toggle extends React.Component {
    constructor(props) {
        super(props);
        this.state = { isToggleOn: true };
        // 事件函数赋值给事件时存在堆中, 作为事件的回调, 调用时已经不是通过类实例来调用, 而是直接调用, 所以this指向会发生改变
        // 必须绑定, 为了在JSX回调中使用this, 忘记绑定时this为undefined
        // 或把handleClick写成箭头函数形式, 正确绑定this
        this.handleClick = this.handleClick.bind(this);
    }
    handleClick () {
    // handleClick  = () => { // 使用该方法无需bind绑定
        this.setState({
            isToggleOn: !this.state.isToggleOn
        });
        // 或
        // this.setState(prevState => ({
        //     // tips: 箭头函数返回一个对象时需要加括号, 不然会报错
        //     isToggleOn: !prevState.isToggleOn
        // }));
    }
    render() {
        return (
            <button
                // this必须
                onClick={this.handleClick}
                // 需要传参时
                // (e) => this.handleClick(xx, e) -- 显式传递事件对象e
                // 或 this.handleClick.bind(this, xx) -- 隐式传递事件对象以及更多的参数
            >
                {this.state.isToggleOn ? 'ON' : 'OFF'}
            </button>
        );
    }
}



ReactDOM.render(
    <Toggle />,
    document.getElementById('root')
);